<template>
	<div>
		<div class="line"></div>
		<div class="hot-box">
			<div class="title">
				<p>猜你喜欢</p>
			</div>
			<div class="hot-con">
				<ul>
					<li v-for="item of likeList" :key="item.id">
						<img :src="item.imgUrl" />
						<div class="hot-content">
							<p class="hot-title">{{item.title}}</p>
							<div class="hot-price-wrapper">
								<p class="hot-price"><span><label>￥</label>{{item.price}}</span>起</p>
								<p class="address">{{item.address}}</p>
							</div>
						</div>
						<div class="clear"></div>
					</li>
				</ul>
			</div>
		</div>
		<!--猜你喜欢结束-->
		<div class="like-more">
			<a href="">查看所有产品</a>
		</div>
	</div>
</template>

<script>
	export default{
		name:"IndexLike",
		props:{
			likeList:Array
		}
	}
</script>

<style scoped>
	.clear{
		clear: both;
	}
	.line{
		height: .25rem;
		width: 100%;
		background-color: #eee;
	}
	.hot-box{
		width: 92%;
		margin: 0px auto;
	}
	.hot-box .title{
		display:flex;
		margin: .2rem 0 .3rem;
	}
	.hot-box .title p{
		color: #333;
		font-size: .3rem;
		flex: 1;
		background: url('http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png') no-repeat left;
		background-size: .3rem;
		padding-left: .4rem;
	}
	.hot-box .hot-con{
		width: 100%;
	}
	.hot-box ul li{
		width: 100%;
		margin: .25rem auto;
	}
	.hot-box ul li img{
		width: 2rem;
		height: 2rem;
		float: left;
	}
	.hot-box ul li .hot-content{
		float: left;
		width: calc( 100% - 2.25rem );
		padding-left: .25rem;
	}
	
	.hot-box ul li .hot-title{
		font-size: .32rem;
		color: #212121;
		line-height: .44rem;
		overflow: hidden;
		white-space: nowrap;
	    text-overflow: ellipsis;
		margin-top: .26rem;
	}
	.hot-price-wrapper{
		margin-top: .25rem;
	}
	.hot-box ul li .hot-price{
		color: #616161;
		font-size: .24rem;
		line-height: .36rem;
		float: left;
	}
	.hot-box ul li .hot-price span{
		color: #ff8300;
		font-size: .48rem;
	}
	.hot-box ul li .hot-price span label{
		font-size: .24rem;
	}
	.hot-box ul li .address{
		float: right;
	}
	.like-more{
		border-top: 1px solid #eee;
	}
	.like-more a{
		display: block;
		padding: .2rem 0;
		color: #00afc7;
		font-size: .28rem;
		line-height: .4rem;
		text-align: center;
	}
</style>
